<template>
  <div class="border-line card">
    <header-title title="公租房房源分类情况" @fullScreen="handleFullScreen"></header-title>
    <echarts-view ref="echarts" :options="option" height="360px"></echarts-view>
  </div>
</template>

<script>
import headerTitle from './headerTitle'
import { echartsView } from '@/components'
import axios from 'axios'
import 'echarts-gl'
export default {
  props: {
    isFullscren: {
      type: Boolean,
      default: false,
    },
    areaID: {
      type: Number,
      default: 0,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      option: {},
      projectData: [
        { name: '市级统筹（住投公司）公租房', value: 40295 },
        { name: '各区政府（乡镇）自建公租房', value: 4498 },
        { name: '各区企业自建公租房', value: 10131 },
        { name: '市教育局自管教师公租房', value: 6354 },
        { name: '一市三县公租房', value: 15564 },
        { name: '中天共有产权公租房', value: 19440 },
      ],
      projectData123: [
        { name: '市级统筹(主投公司)公租房', value: 40895 },
        { name: '各区政府(乡镇)', value: 40895 },
        { name: '一市三线', value: 40895 },
        { name: '企业自建', value: 40895 },
        { name: '共有产权', value: 40895 },
        { name: '教师公租房', value: 40895 },
      ],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const that = this
      const hx = axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_FWHX?RegionNO=${this.areaID}`)
      const mj = axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_FWmj?RegionNO=${this.areaID}`)
      axios
        .get(`http://222.85.201.111:8026/api/statistics/Get_KB_FWHX?RegionNO=${this.areaID}`)
        .then((res) => {
          that.option = {
            color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
            tooltip: {
              trigger: 'item',
              confine: true,
            },
            legend: {
              headerTitleorient: 'vertical',
              headerTitleleft: 'right',
              left: 'left',
              width: '20px',
              // bottom: 'center',
              textStyle: {
                color: '#ffffff',
                fontSize: 26,
              },
              itemStyle: {
                borderWidth: 4,
              },
            },
            series: [
              {
                name: '户型面积',
                type: 'pie',
                radius: ['35%', '50%'],
                avoidLabelOverlap: false,
                center: ['60%', '30%'],
                label: {
                  show: true,
                  position: 'outside',
                  color: '#ffffff',
                  formatter: '{b} : {c}套',
                },
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '套'
                  },
                },
                labelLine: {
                  show: true,
                },
                // data: res.data,
                data: [
                  { value: 40895, name: '市级统筹(主投公司)公租房' },
                  { value: 40895, name: '各区政府(乡镇)' },
                  { value: 40895, name: '一市三线' },
                  { value: 40895, name: '企业自建' },
                  { value: 40895, name: '共有产权' },
                  { value: 40895, name: '教师公租房' },
                ],
                // data: this.projectData,
              },
            ],
          }
        })
        .catch(function (error) {
          this.$message.error(`网络请求错误，请稍后重试！错误信息：${error}`)
        })
    },
    // 生成模拟 3D 饼图的配置项
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 300px;
  &-content {
    margin-top: 10px;
    font-size: 16px;
  }
}
</style>
